<template>
  <div id="config">
    <div class="block">
      <span class="demonstration">有默认值</span>
      <el-color-picker
        @active-change="ActiveChangeColor"
        :value="color1"
        :predefine="predefineColors"
      ></el-color-picker>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color1: this.$store.state.theme.backgroundColor,
      predefineColors: [
        "#545c63",
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585"
      ]
    };
  },
  methods: {
    ActiveChangeColor(value) {
      this.color1 = value;
      this.$store.commit("changeTheme", value);
    }
  }
};
</script>

<style scoped>
#config {
  text-align: center;
}
</style>
